<script>
import Icon from '/@/components/base/Icon.vue';
import { arrHasData } from '/@/utils';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
export default {
	name: 'ImgList',
	components: { Icon, PictureSelectorDialog },
	props: {
		modelValue: {
			type: Array,
			default: () => [],
		},
	},
	setup(props) {
		const isShowPicSelector = ref(false);
		const imgList = computed({
			get: () => {
				return props.modelValue;
			},
			set: () => {},
		});
		return {
			imgList,
			isShowPicSelector,
			delItem(index) {
				imgList.value.splice(index, 1);
			},
			selectPic() {
				isShowPicSelector.value = true;
			},
			getPic(pic) {
				if (!arrHasData(pic)) return;
				const urlList = pic.map((item) => {
					return {
						src: item.imgUrl,
					};
				});
				imgList.value.push(...urlList);
			},
		};
	},
};
</script>
<template>
	<div class="ImgList">
		<ul>
			<li v-for="(item, index) in imgList" :key="index">
				<Img :src="item.src" width="100px" height="100px" />
				<span @click="delItem(index)">
					<Icon name="CloseBold" class="del_icon" />
				</span>
			</li>
			<li>
				<div class="plus_wrap" @click="selectPic">
					<Icon name="Plus" />
				</div>
			</li>
		</ul>
		<PictureSelectorDialog v-model="isShowPicSelector" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ImgList {
	ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		li {
			position: relative;
			width: 120px;
			height: 100px;
			box-sizing: border-box;
			padding: 0 10px;
			margin-bottom: 10px;
			.del_icon {
				position: absolute;
				top: 0px;
				right: 15px;
				display: none;
				font-size: 16px;
				cursor: pointer;
			}
			&:hover {
				.icon {
					display: inline-block;
				}
			}
			.plus_wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100px;
				border: 1px dashed var(--el-color-primary);
				cursor: pointer;
				.icon {
					font-size: 30px;
				}
			}
		}
	}
}
</style>
